<template>
  <div id="personResume">
    <div class="div_title" style="width:90%;">
      <p>我的简历</p>
    </div>
    <div class="resume_name-box">
      <el-row>
        <el-col :span="3"><span class="title-font_size">简历名称：</span></el-col>
        <el-col :span="6" v-if="isEditResumeName" :style="{'margin-right':'30px'}">
          <el-input placeholder="请填写简历名称" v-model="resumeName" @keyup.enter.native="saveResumeName">
          </el-input>
        </el-col>
        <el-col :span="6" v-else>
          <span class="title-font_size resume_name" @click="editResumeName()">{{ resumeName }}</span>
        </el-col>
        <el-col :span="4" v-if="!isEditResumeName">
          <el-button type="primary" @click="editResumeName()">编辑简历名称</el-button>
        </el-col>
        <el-col :span="4" v-else>
          <el-button type="primary" @click="saveResumeName()">保存简历名称</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="resume-content">
      <!-- 基本信息 -->
      <el-row :gutter="20" class="column-box">
        <el-col :span="6" class="div_border_title">
          <h4>基本信息（必填）<i class="el-icon-edit title-icon" @click="editBasciInfo()"></i></h4>
        </el-col>
      </el-row>
      <div v-if="isEditBasicInfo">
        <ResumePersonalForm :resumeId="resume_id"
                            @sendEditBasicInfoStatus="getEditBasicInfoStatus"></ResumePersonalForm>
      </div>
      <div v-else>
        <el-row class="info-row" :style="{'margin-top': '20px'}">
          <el-col :span="4">
            <div class="info-title">
              <h3><i class="required">* </i>真实姓名</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ basicInfo.real_name || '未填写'}}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right">
              <h3><i class="required">* </i>性别</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ getStaticMapData('sex', basicInfo.sex) || '未填写'}}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right">
              <h3><i class="required">* </i>出生日期</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ getFormatterTime('date', basicInfo.birthday) || '未填写'}}
            </div>
          </el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="4">
            <div class="info-title">
              <h3><i class="required">* </i>民族</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ basicInfo.nation || '未填写'}}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right">
              <h3><i class="required">* </i>最高学历</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ getStaticMapData('education', basicInfo.end_education) || '未填写'}}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right">
              <h3><i class="required">* </i>参加工作时间</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ getFormatterTime('date', basicInfo.work_start_date) || '未填写'}}
            </div>
          </el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="4">
            <div class="info-title">
              <h3>婚姻状况</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ getStaticMapData('marriage', basicInfo.marriage) || '未填写'}}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right">
              <h3>政治面貌</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ getStaticMapData('political', basicInfo.political) || '未填写'}}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right">
              <h3> QQ号</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ basicInfo.qq || '未填写'}}
            </div>
          </el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="4">
            <div class="info-title">
              <h3><i class="required">* </i>现居住地</h3>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-content">
              <el-tooltip effect="light" :content="basicInfo.living" placement="top-start">
                <nobr>{{ basicInfo.living || '未填写'}}</nobr>
              </el-tooltip>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right">
              <h3><i class="required">* </i>户籍</h3>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-content">
              <el-tooltip effect="light" :content="basicInfo.native_place" placement="top-start">
                <nobr>{{ basicInfo.native_place || '未填写'}}</nobr>
              </el-tooltip>
            </div>
          </el-col>
        </el-row>
        <el-row class="info-evaluation">
          <el-col :span="4">
            <div class="info-title">
              <h3>自我评价</h3>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="info-content" v-html="basicInfo.evaluation">

            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 求职意向 careerObjectiveInfo -->
      <el-row :gutter="20" class="column-box">
        <el-col :span="6" class="div_border_title">
          <h4>求职意向（必填）<i class="el-icon-edit title-icon" @click="editCareerOb()"></i></h4>
        </el-col>
      </el-row>
      <div v-if="isEditCareerOb">
        <ResumeCareerObjectiveForm :resumeId="resume_id" :careerId="careerObjectiveInfo.id"
                                   @sendEditCareerInfoStatus="getEditCareerInfoStatus"></ResumeCareerObjectiveForm>
      </div>
      <div v-else>
        <el-row class="info-row" :style="{'margin-top': '20px'}">
          <el-col :span="4">
            <div class="info-title">
              <h3><i class="required">* </i>期望职业1</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ careerObjectiveInfo.position_name1 || '未填写'}}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right">
              <h3>期望职业2</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ careerObjectiveInfo.position_name2 || '未填写'}}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right">
              <h3>期望职业3</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ careerObjectiveInfo.position_name3 || '未填写'}}
            </div>
          </el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="4">
            <div class="info-title">
              <h3>工作性质</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ getStaticMapData('work_type', careerObjectiveInfo.work_type) || '未填写'}}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right">
              <h3>最低薪资(元)</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ careerObjectiveInfo.expected_min_salary || '未填写'}}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right">
              <h3>最高薪资(元)</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-content">
              {{ careerObjectiveInfo.expected_max_salary || '未填写'}}
            </div>
          </el-col>
        </el-row>
        <el-row class="info-row-bottom">
          <el-col :span="4">
            <div class="info-title" style="border-bottom:1px solid #dddddd;">
              <h3>期望工作地点</h3>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-content">
              <el-tooltip effect="light" :content="careerObjectiveInfo.place_name" placement="top-start">
                <nobr>{{ careerObjectiveInfo.place_name || '未填写'}}</nobr>
              </el-tooltip>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-title info-title-right" style="border-bottom:1px solid #dddddd;">
              <h3>求职状态</h3>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-content">
              {{ getStaticMapData('status', careerObjectiveInfo.status) || '未填写'}}
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 教育经历 -->
      <el-row :gutter="20" class="column-box">
        <el-col :span="6" class="div_border_title">
          <h4>教育经历（必填）<i class="el-icon-plus title-icon" @click="addResumeItem('educationBg')"></i></h4>
        </el-col>
      </el-row>
      <div v-if="isAddEducationBg">
        <ResumeEducationForm :resumeId="resume_id" educationId="add"
                             @sendEditEducationStatus="getEditEducationStatus"></ResumeEducationForm>
      </div>
      <el-row v-else class="personalInfoBorder">
        <el-col :span="24">
          <el-collapse accordion>
            <el-collapse-item v-for="(item,index) in educationInfoList"
                              :title="item.attend_date + ' 至 ' + item.graduation_date + ' ' + item.school_info + ' ' + item.profession"
                              :key="index">
              <div v-if="isEditEducationBg">
                <ResumeEducationForm :resumeId="resume_id" :educationId="item.id"
                                     @sendEditEducationStatus="getEditEducationStatus"></ResumeEducationForm>
              </div>
              <div v-else>
                <el-row :style="{'margin-bottom':'20px'}">
                  <el-col :span="4" class="editButton"
                          :style="{'height':'30px','line-height':'30px','background-color':'#FF4949'}">
                    <p @click="deleteResumeItem(item.id,'educationBg')"><i class="el-icon-delete"></i> 删除</p>
                  </el-col>
                  <el-col :span="4" :offset="1" class="editButton"
                          :style="{'height':'30px','line-height':'30px','background-color':'#20A0FF'}">
                    <p @click="editResumeItem('educationBg')"><i class="el-icon-edit"></i> 编辑</p>
                  </el-col>
                  <el-col :span="4" :offset="1" class="editButton"
                          :style="{'height':'30px','line-height':'30px','background-color':'#20A0FF'}">
                    <p @click="editResumeItem('educationBg')"><i class="el-icon-picture"></i> 上传毕业证</p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="3">学历</el-col>
                  <el-col :span="5">{{ getStaticMapData('education', item.education) || '未填写'}}</el-col>
                  <el-col :span="3">专业类型</el-col>
                  <el-col :span="5">{{ item.profession_type || '未填写'}}</el-col>
                </el-row>
                <!-- ShowImageCard -->
                <el-row>
                  <el-col :span="5">
                    <div :style="{'font-size':'1.3em','margin-top':'10px'}">毕业证书正面照</div>
                    <show-image-card :url="item.diploma1_url" :config="showImageConfig"></show-image-card>
                  </el-col>
                  <el-col :span="5">
                    <div :style="{'font-size':'1.3em','margin-top':'10px'}">毕业证书反面照</div>
                    <show-image-card :url="item.diploma2_url" :config="showImageConfig"></show-image-card>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <!-- 工作经历 -->
      <el-row :gutter="20" class="column-box">
        <el-col :span="6" class="div_border_title">
          <h4>工作经历 <i class="el-icon-plus title-icons" @click="addResumeItem('workExperience')"></i></h4>
        </el-col>
      </el-row>
      <div v-if="isAddWorkExperience">
        <ResumeWorkExperienceForm :resumeId="resume_id" workId="add"
                                  @sendEditWorkStatus="getEditWorkStatus"></ResumeWorkExperienceForm>
      </div>
      <el-row v-else class="personalInfoBorder">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-collapse accordion>
              <el-collapse-item v-for="(item,index) in workExperienceList" :key="index" :title="item.company_name">
                <div v-if="isEditWorkExperience">
                  <ResumeWorkExperienceForm :resumeId="resume_id" :workId="item.id"
                                            @sendEditWorkStatus="getEditWorkStatus"></ResumeWorkExperienceForm>
                </div>
                <div v-else>
                  <el-row :style="{'margin-bottom':'20px'}">
                    <el-col :span="4" class="editButton"
                            :style="{'height':'30px','line-height':'30px','background-color':'#FF4949'}">
                      <p @click="deleteResumeItem(item.id,'workExperience')"><i class="el-icon-delete"></i> 删除</p>
                    </el-col>
                    <el-col :span="4" :offset="1" class="editButton"
                            :style="{'height':'30px','line-height':'30px','background-color':'#20A0FF'}">
                      <p @click="editResumeItem('workExperience')"><i class="el-icon-edit"></i> 编辑</p>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>公司名称</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.company_name || '未填写'}}</p></div>
                    </el-col>
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>所属行业</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.industry_name || '未填写'}}</p></div>
                    </el-col>
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>公司类型</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>
                        {{getStaticMapData('company_type', item.company_type) || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>单位规模</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>
                        {{getStaticMapData('company_size', item.company_size) || '未填写'}}</p></div>
                    </el-col>
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>职位类别</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.position_type || '未填写'}}</p></div>
                    </el-col>
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>职位名称</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.position_name || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>所在部门</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.department || '未填写'}}</p></div>
                    </el-col>
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>汇报对象</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.leader || '未填写'}}</p></div>
                    </el-col>
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>月薪(元)</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.salary || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>下属人数(人)</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.subordinates || '未填写'}}</p></div>
                    </el-col>
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>起始时间</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.start_date || '未填写'}}</p></div>
                    </el-col>
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>结束时间</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.end_date || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-col>
      </el-row>
      <!-- 项目经验 -->
      <el-row :gutter="20" class="column-box">
        <el-col :span="6" class="div_border_title">
          <h4>项目经验 <i class="el-icon-plus title-icons" @click="addResumeItem('projectExperience')"></i></h4>
        </el-col>
      </el-row>
      <div v-if="isAddProjectExperience">
        <ResumeProjectExperienceForm :resumeId="resume_id" projectId="add"
                                     @sendEditProjectStatus="getEditProjectStatus"></ResumeProjectExperienceForm>
      </div>
      <el-row v-else class="personalInfoBorder">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-collapse accordion>
              <el-collapse-item v-for="(item,index) in projectExperienceList" :key="index" :title="item.project_name">
                <div v-if="isEditProjectExperience">
                  <ResumeProjectExperienceForm :resumeId="resume_id" :projectId="item.id"
                                               @sendEditProjectStatus="getEditProjectStatus"></ResumeProjectExperienceForm>
                </div>
                <div v-else>
                  <el-row :style="{'margin-bottom':'20px'}">
                    <el-col :span="4" class="editButton"
                            :style="{'height':'30px','line-height':'30px','background-color':'#FF4949'}">
                      <p @click="deleteResumeItem(item.id,'projectExperience')"><i class="el-icon-delete"></i> 删除</p>
                    </el-col>
                    <el-col :span="4" :offset="1" class="editButton"
                            :style="{'height':'30px','line-height':'30px','background-color':'#20A0FF'}">
                      <p @click="editResumeItem('projectExperience')"><i class="el-icon-edit"></i> 编辑</p>
                    </el-col>
                    <el-col :span="4" :offset="1" class="editButton"
                            :style="{'height':'30px','line-height':'30px','background-color':'#20A0FF'}">
                      <p @click="editResumeItem('projectExperience')"><i class="el-icon-picture"></i> 上传作品图片</p>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>起始时间</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.start_date || '未填写'}}</p></div>
                    </el-col>
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>结束时间</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.end_date || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>负责部分</p></div>
                    </el-col>
                    <el-col :span="13" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.responsible_section || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>职位描述</p></div>
                    </el-col>
                    <el-col :span="13" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.project_description || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="5">
                      <div :style="{'font-size':'1.3em','margin-top':'10px'}">作品图片1</div>
                      <show-image-card :url="item.projects_file_url1" :config="showImageConfig"></show-image-card>
                    </el-col>
                    <el-col :span="5">
                      <div :style="{'font-size':'1.3em','margin-top':'10px'}">作品图片2</div>
                      <show-image-card :url="item.projects_file_url2" :config="showImageConfig"></show-image-card>
                    </el-col>
                    <el-col :span="5">
                      <div :style="{'font-size':'1.3em','margin-top':'10px'}">作品图片3</div>
                      <show-image-card :url="item.projects_file_url3" :config="showImageConfig"></show-image-card>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="5">
                      <div :style="{'font-size':'1.3em','margin-top':'10px'}">作品图片4</div>
                      <show-image-card :url="item.projects_file_url4" :config="showImageConfig"></show-image-card>
                    </el-col>
                    <el-col :span="5">
                      <div :style="{'font-size':'1.3em','margin-top':'10px'}">作品图片5</div>
                      <show-image-card :url="item.projects_file_url5" :config="showImageConfig"></show-image-card>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-col>
      </el-row>
      <!-- 培训经验 -->
      <el-row :gutter="20" class="column-box">
        <el-col :span="6" class="div_border_title">
          <h4>培训经历<i class="el-icon-plus title-icons" @click="addResumeItem('trainingExperience')"></i></h4>
        </el-col>
      </el-row>
      <div v-if="isAddTrainingExperience">
        <ResumeTrainingExperienceForm :resumeId="resume_id" trainingId="add"
                                      @sendEditTainingStatus="getEditTainingStatus"></ResumeTrainingExperienceForm>
      </div>
      <el-row v-else class="personalInfoBorder">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-collapse accordion>
              <el-collapse-item v-for="(item,index) in trainingExperienceList" :key="index" :title="item.train_class">
                <div v-if="isEditTrainingExperience">
                  <ResumeTrainingExperienceForm :resumeId="resume_id" :trainingId="item.id"
                                                @sendEditTainingStatus="getEditTainingStatus"></ResumeTrainingExperienceForm>
                </div>
                <div v-else>
                  <el-row :style="{'margin-bottom':'20px'}">
                    <el-col :span="4" class="editButton"
                            :style="{'height':'30px','line-height':'30px','background-color':'#FF4949'}">
                      <p @click="deleteResumeItem(item.id,'trainingExperience')"><i class="el-icon-delete"></i> 删除</p>
                    </el-col>
                    <el-col :span="4" :offset="1" class="editButton"
                            :style="{'height':'30px','line-height':'30px','background-color':'#20A0FF'}">
                      <p @click="editResumeItem('trainingExperience')"><i class="el-icon-edit"></i> 编辑</p>
                    </el-col>
                    <el-col :span="4" :offset="1" class="editButton"
                            :style="{'height':'30px','line-height':'30px','background-color':'#20A0FF'}">
                      <p @click="editResumeItem('trainingExperience')"><i class="el-icon-picture"></i> 上传培训证书</p>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>培训机构</p></div>
                    </el-col>
                    <el-col :span="13" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.train_institute || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>获得证书</p></div>
                    </el-col>
                    <el-col :span="13" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.train_certificate || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>起始时间</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.start_date || '未填写'}}</p></div>
                    </el-col>
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>结束时间</p></div>
                    </el-col>
                    <el-col :span="5" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.finish_date || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>详细描述</p></div>
                    </el-col>
                    <el-col :span="13" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.describe || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="5">
                      <div :style="{'font-size':'1.3em','margin-top':'10px'}">培训证书正面照</div>
                      <show-image-card :url="item.training_file_url1" :config="showImageConfig"></show-image-card>
                    </el-col>
                    <el-col :span="5">
                      <div :style="{'font-size':'1.3em','margin-top':'10px'}">培训证书反面照</div>
                      <show-image-card :url="item.training_file_url2" :config="showImageConfig"></show-image-card>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-col>
      </el-row>
      <!-- 技能证书 -->
      <el-row :gutter="20" class="column-box">
        <el-col :span="6" class="div_border_title">
          <h4>技能证书<i class="el-icon-plus title-icons" @click="addResumeItem('certificate')"></i></h4>
        </el-col>
      </el-row>
      <div v-if="isAddCertificate">
        <ResumeCertificateForm :resumeId="resume_id" certificateId="add"
                               @sendEditCertificateStatus="getEditCertificateStatus"></ResumeCertificateForm>
      </div>
      <el-row v-else class="personalInfoBorder">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-collapse accordion>
              <el-collapse-item v-for="(item,index) in certificateList" :key="index" :title="item.certificate_name">
                <div v-if="isEditCertificate">
                  <ResumeCertificateForm :resumeId="resume_id" :certificateId="item.id"
                                         @sendEditCertificateStatus="getEditCertificateStatus"></ResumeCertificateForm>
                </div>
                <div v-else>
                  <el-row :style="{'margin-bottom':'20px'}">
                    <el-col :span="4" class="editButton"
                            :style="{'height':'30px','line-height':'30px','background-color':'#FF4949'}">
                      <p @click="deleteResumeItem(item.id,'certificate')"><i class="el-icon-delete"></i> 删除</p>
                    </el-col>
                    <el-col :span="4" :offset="1" class="editButton"
                            :style="{'height':'30px','line-height':'30px','background-color':'#20A0FF'}">
                      <p @click="editResumeItem('certificate')"><i class="el-icon-edit"></i> 编辑</p>
                    </el-col>
                    <el-col :span="4" :offset="1" class="editButton"
                            :style="{'height':'30px','line-height':'30px','background-color':'#20A0FF'}">
                      <p @click="editResumeItem('certificate')"><i class="el-icon-picture"></i> 上传技能证书</p>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="3" style="padding-right:0px;">
                      <div class="grid-content bg-purple "><p>获得证书时间</p></div>
                    </el-col>
                    <el-col :span="13" style="padding-left:0px; padding-right:0px;">
                      <div class="grid-content bg-purple "><p>{{item.certificate_date || '未填写'}}</p></div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="5">
                      <div :style="{'font-size':'1.3em','margin-top':'10px'}">技能证书正面照</div>
                      <show-image-card :url="item.certificate_file_url1" :config="showImageConfig"></show-image-card>
                    </el-col>
                    <el-col :span="5">
                      <div :style="{'font-size':'1.3em','margin-top':'10px'}">技能证书反面照</div>
                      <show-image-card :url="item.certificate_file_url2" :config="showImageConfig"></show-image-card>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { formatterTime, changeSalaryStyle } from '../../assets/js/common.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import ResumePersonalForm from '@/components/myResume/personalResumeForm/ResumePersonalForm'
  import ResumeEducationForm from '@/components/myResume/personalResumeForm/ResumeEducationForm'
  import ResumeCareerObjectiveForm from '@/components/myResume/personalResumeForm/ResumeCareerObjectiveForm'
  import ResumeWorkExperienceForm from '@/components/myResume/personalResumeForm/ResumeWorkExperienceForm'
  import ResumeProjectExperienceForm from '@/components/myResume/personalResumeForm/ResumeProjectExperienceForm'
  import ResumeTrainingExperienceForm from '@/components/myResume/personalResumeForm/ResumeTrainingExperienceForm'
  import ResumeCertificateForm from '@/components/myResume/personalResumeForm/ResumeCertificateForm'
  import ShowImageCard from '@/components/common/ShowImageCard'

  export default {
    name: 'personResume',
    props: ['id'],
    data () {
      return {
        complete_progress: {
          basic: 0,
          education: 0,
          career: 0,
          workExp: 0,
          project: 0,
          training: 0,
          certificate: 0
        },
        //显示图片组件的参数
        showImageConfig: {
          width: '150px',
          height: '200px',
          isPopUp: true
        },
        editBtnSpan: 13,
        resume_id: '',
        activeName: '1',
        isEditBasicInfo: false,
        isEditResumeName: false,
        isEditEducationBg: false,//是否编辑教育背景
        isAddEducationBg: false,//是否新增教育背景
        isEditCareerOb: false,//是否编辑求职意向
        isAddWorkExperience: false,
        isEditWorkExperience: false,//是否编辑工作经历
        isAddProjectExperience: false,
        isEditProjectExperience: false,
        isAddTrainingExperience: false,
        isEditTrainingExperience: false,//培训经历
        isAddCertificate: false,
        isEditCertificate: false,//技能证书
        resumeName: '',
        //基本信息表单
        basicInfo: {
          real_name: '',
          sex: 0,
          birthday: '',
          nation: '', //民族
          native_place: '',//户口所在地
          living: '',//现住地
          work_start_date: '',//参加工作时间
          marriage: 0, //婚姻状态
          political: 0, //政治面貌
          evaluation: '',//自我评价
          end_education: 0,//最高学历
          height: 0,//身高
          qq: ''
        },
        //教育背景表单
        educationInfoList: [],
        //求职意向
        careerObjectiveInfo: {
          id: undefined,
          position_name1: '',
          position_name2: '',
          position_name3: '',
          work_type: 0,
          place_name: '',
          expected_max_salary: 0,
          expected_min_salary: 0,
          status: 0
        },
        //工作经历表单
        workExperienceList: [],
        //项目经验表单
        projectExperienceList: [],
        //培训经历
        trainingExperienceList: [],
        //技能证书
        certificateList: [],
      }
    },
    components: {
      ResumePersonalForm,
      ResumeEducationForm,
      ResumeCareerObjectiveForm,
      ResumeWorkExperienceForm,
      ResumeProjectExperienceForm,
      ResumeTrainingExperienceForm,
      ResumeCertificateForm,
      ShowImageCard
    },
    created () {
      this.createComponent()
    },
    methods: {
      createComponent () {
        this.resume_id = this.id
        this.getResumeDataToServer(this.resume_id)
      },
      getStaticMapData (type, value) {
        return getStaticMapList(type, value)
      },
      getFormatterTime (type, date) {
        return formatterTime(type, date)
      },
      //获取简历信息
      getResumeDataToServer (id) {
        let _this = this
        let parameter = new Object()
        parameter.resume_id = id
        postDataToServer('HM_RESUME_GET', parameter).then((data) => {
          if (data.status === 0) {
            let resultContent = data.data_list
            if ('resume_name' in resultContent) {
              _this.resumeName = resultContent.resume_name
            }
            //将上一份简历的完成度清空
            for (let key in _this.complete_progress) {
              _this.complete_progress[key] = 0
            }
            //用户基本信息
            if (resultContent.personal_list.length > 0) {
              _this.basicInfo = resultContent.personal_list[0]
              _this.complete_progress.basic = 20
            }
            //教育背景
            _this.educationInfoList = resultContent.education_list
            if (resultContent.education_list.length > 0) {
              _this.complete_progress.education = 20
            }
            //求职意向
            if (resultContent.objective_list.length > 0) {
              _this.careerObjectiveInfo = resultContent.objective_list[0]
              _this.complete_progress.career = 20
            }
            //工作经历
            _this.workExperienceList = resultContent.works_list
            if (resultContent.works_list.length > 0) {
              _this.complete_progress.workExp = 10
            }
            //项目经验
            _this.projectExperienceList = resultContent.projects_list
            if (resultContent.projects_list.length > 0) {
              _this.complete_progress.project = 10
            }
            //培训经验
            _this.trainingExperienceList = resultContent.train_list
            if (resultContent.train_list.length > 0) {
              _this.complete_progress.training = 10
            }
            //技能证书
            _this.certificateList = resultContent.certificate_list
            if (resultContent.certificate_list.length > 0) {
              _this.complete_progress.certificate = 10
            }
            _this.$emit('returnProgress', _this.complete_progress)
          } else {
            _this.$message.error(data.message)
          }
        })
      },
      editResumeName () {
        this.isEditResumeName = true
      },
      saveResumeName () {
        let _this = this
        let parameter = new Object()
        parameter.resume_name = this.resumeName
        parameter.resume_id = this.resume_id
        postDataToServer('HM_RESUME_EDIT', parameter).then((data) => {
          if (data.status === 0) {
            this.isEditResumeName = false
            this.$emit('EditResumeName', true)
          } else {
            _this.$message.error(data.message)
          }
        })
      },
      //新增按钮触发
      addResumeItem (type) {
        switch (type) {
          case 'educationBg':
            if (this.isAddEducationBg === true || this.isEditEducationBg === true) {
              this.$message.info('请保存当前编辑')
            } else {
              this.isAddEducationBg = true
            }
            break
          case 'workExperience':
            if (this.isAddWorkExperience === true || this.isEditWorkExperience) {
              this.$message.info('请保存当前编辑')
            } else {
              this.isAddWorkExperience = true
            }
            break
          case 'projectExperience':
            if (this.isAddProjectExperience === true || this.isEditProjectExperience) {
              this.$message.info('请保存当前编辑')
            } else {
              this.isAddProjectExperience = true
            }
            break
          case 'trainingExperience':
            if (this.isAddTrainingExperience === true || this.isEditTrainingExperience) {
              this.$message.info('请保存当前编辑')
            } else {
              this.isAddTrainingExperience = true
            }
            break
          case 'certificate':
            if (this.isAddCertificate === true || this.isEditCertificate) {
              this.$message.info('请保存当前编辑')
            } else {
              this.isAddCertificate = true
            }
            break
          default:
            // statements_def
            break
        }
      },
      //编辑按钮触发
      editResumeItem (type) {
        switch (type) {
          case 'educationBg':
            if (this.isEditEducationBg === true) {
              this.$message.info('请保存当前编辑')
            } else {
              this.isEditEducationBg = true
            }
            break
          case 'workExperience':
            if (this.isAddWorkExperience === true || this.isEditWorkExperience) {
              this.$message.info('请保存当前编辑')
            } else {
              this.isEditWorkExperience = true
            }
            break
          case 'projectExperience':
            if (this.isAddProjectExperience === true || this.isEditProjectExperience) {
              this.$message.info('请保存当前编辑')
            } else {
              this.isEditProjectExperience = true
            }
            break
          case 'trainingExperience':
            if (this.isAddTrainingExperience === true || this.isEditTrainingExperience) {
              this.$message.info('请保存当前编辑')
            } else {
              this.isEditTrainingExperience = true
            }
            break
          case 'certificate':
            if (this.isAddCertificate === true || this.isEditCertificate) {
              this.$message.info('请保存当前编辑')
            } else {
              this.isEditCertificate = true
            }
            break
          default:
            // statements_def
            break
        }
      },
      deleteResumeItem (id, type) {
        let _this = this
        this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parameter = new Object()
          parameter.id = id
          let path
          switch (type) {
            case 'educationBg':
              path = 'HM_RESUME_EDUCATION_DEL'
              break
            case 'workExperience':
              path = 'HM_RESUME_WORKS_DEL'
              break
            case 'projectExperience':
              path = 'HM_RESUME_PROJECTS_DEL'
              break
            case 'trainingExperience':
              path = 'HM_RESUME_TRAIN_DEL'
              break
            case 'certificate':
              path = 'HM_RESUME_CERTIFICATE_DEL'
              break
            default:
              // statements_def
              break
          }
          postDataToServer(path, parameter).then((data) => {
            if (data.status === 0) {
              _this.$message.success('删除成功!')
              switch (type) {
                case 'educationBg':
                  _this.getEducationInfo()
                  break
                case 'workExperience':
                  _this.getWorkExperienceInfo()
                  break
                case 'projectExperience':
                  _this.getProjectExperienceInfo()
                  break
                case 'trainingExperience':
                  _this.getTrainingExperienceInfo()
                  break
                case 'certificate':
                  _this.getCertificateInfo()
                  break
                default:
                  break
              }
            } else {
              _this.$message.error('删除失败!')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      //触发编辑基本信息按钮
      editBasciInfo () {
        this.isEditBasicInfo = true
      },
      getBasicInfo () {
        let _this = this
        let parameter = new Object()
        parameter.resume_id = _this.resume_id
        postDataToServer('HM_RESUME_PERSONAL_GET', parameter).then((data) => {
          if (data.status === 0) {
            _this.basicInfo = data.data_list
          }
        })
      },
      //获取基本信息保存的状态
      getEditBasicInfoStatus (status) {
        if (status === 'success') {
          this.$message.success('保存成功')
          this.isEditBasicInfo = false
          this.getBasicInfo()
        } else if (status === 'cancel') {
          this.isEditBasicInfo = false
        }
      },

      //求职意向
      editCareerOb () {
        this.isEditCareerOb = true
      },
      getCareerInfo () {
        let _this = this
        let parameter = new Object()
        parameter.resume_id = _this.resume_id
        postDataToServer('HM_RESUME_OBJECTIVE_LISTALL', parameter).then((data) => {
          if (data.status === 0) {
            _this.careerObjectiveInfo = data.data_list
            if (data.data_list.length !== 0) {
              _this.complete_progress.career = 20
            }
            _this.$emit('returnProgress', _this.complete_progress)
          }
        })
      },
      getEditCareerInfoStatus (status) {
        if (status === 'success') {
          this.$message.success('保存成功')
          this.isEditCareerOb = false
          this.getCareerInfo()
        } else if (status === 'cancel') {
          this.isEditCareerOb = false
        }
      },

      //教育经历
      getEducationInfo () {
        let _this = this
        let parameter = new Object()
        parameter.resume_id = _this.resume_id
        postDataToServer('HM_RESUME_EDUCATION_LISTALL', parameter).then((data) => {
          if (data.status === 0) {
            _this.educationInfoList = data.data_list
            if (data.data_list.length === 0) {
              _this.complete_progress.education = 0
            } else {
              _this.complete_progress.education = 20
            }
            _this.$emit('returnProgress', _this.complete_progress)
          }
        })
      },
      getEditEducationStatus (status) {
        if (status === 'success') {
          this.$message.success('保存成功')
          this.isEditEducationBg = false
          this.isAddEducationBg = false
          this.getEducationInfo()
        } else if (status === 'cancel') {
          this.isAddEducationBg = false
          this.isEditEducationBg = false
        }
      },

      //工作经历
      getWorkExperienceInfo () {
        let _this = this
        let parameter = new Object()
        parameter.resume_id = _this.resume_id
        postDataToServer('HM_RESUME_WORKS_LISTALL', parameter).then((data) => {
          if (data.status === 0) {
            _this.workExperienceList = data.data_list
            if (data.data_list.length === 0) {
              _this.complete_progress.workExp = 0
            } else {
              _this.complete_progress.workExp = 10
            }
            _this.$emit('returnProgress', _this.complete_progress)
          }
        })
      },
      getEditWorkStatus (status) {
        if (status === 'success') {
          this.$message.success('保存成功')
          this.isAddWorkExperience = false
          this.isEditWorkExperience = false
          this.getWorkExperienceInfo()
        } else if (status === 'cancel') {
          this.isAddWorkExperience = false
          this.isEditWorkExperience = false
        }
      },

      //项目经验
      getProjectExperienceInfo () {
        let _this = this
        let parameter = new Object()
        parameter.resume_id = _this.resume_id
        postDataToServer('HM_RESUME_PROJECTS_LISTALL', parameter).then((data) => {
          if (data.status === 0) {
            _this.projectExperienceList = data.data_list
            if (data.data_list.length === 0) {
              _this.complete_progress.project = 0
            } else {
              _this.complete_progress.project = 10
            }
            _this.$emit('returnProgress', _this.complete_progress)
          }
        })
      },
      getEditProjectStatus (status) {
        if (status === 'success') {
          this.$message.success('保存成功')
          this.isEditProjectExperience = false
          this.isAddProjectExperience = false
          this.getProjectExperienceInfo()
        } else if (status === 'cancel') {
          this.isEditProjectExperience = false
          this.isAddProjectExperience = false
        }
      },

      //培训经历
      getTrainingExperienceInfo () {
        let _this = this
        let parameter = new Object()
        parameter.resume_id = _this.resume_id
        postDataToServer('HM_RESUME_TRAIN_LISTALL', parameter).then((data) => {
          if (data.status === 0) {
            _this.trainingExperienceList = data.data_list
            if (data.data_list.length === 0) {
              _this.complete_progress.training = 0
            } else {
              _this.complete_progress.training = 10
            }
            _this.$emit('returnProgress', _this.complete_progress)
          }
        })
      },
      getEditTainingStatus (status) {
        if (status === 'success') {
          this.$message.success('保存成功')
          this.isEditTrainingExperience = false
          this.isAddTrainingExperience = false
          this.getTrainingExperienceInfo()
        } else if (status === 'cancel') {
          this.isEditTrainingExperience = false
          this.isAddTrainingExperience = false
        }
      },

      //技能证书
      getCertificateInfo () {
        let _this = this
        let parameter = new Object()
        parameter.resume_id = _this.resume_id
        postDataToServer('HM_RESUME_CERTIFICATE_LISTALL', parameter).then((data) => {
          if (data.status === 0) {
            _this.certificateList = data.data_list
            if (data.data_list.length === 0) {
              _this.complete_progress.certificate = 0
            } else {
              _this.complete_progress.certificate = 10
            }
            _this.$emit('returnProgress', _this.complete_progress)
          }
        })
      },
      getEditCertificateStatus (status) {
        if (status === 'success') {
          this.$message.success('保存成功')
          this.isEditCertificate = false
          this.isAddCertificate = false
          this.getCertificateInfo()
        } else if (status === 'cancel') {
          this.isEditCertificate = false
          this.isAddCertificate = false
        }
      }
    },
    watch: {
      id: function (val, oldVal) {
        this.getResumeDataToServer(val)
      }
    }
  }
</script>

<style scoped>
  .title-font_size {
    font-size: 1em;
  }

  .resume_name-box {
    height: 50px;
    margin: 2em 0em 0em;
  }

  .resume_name {
    color: #1D8CE0;
  }

  .resume_name:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  .resume-content {
    padding-left: 10px;
  }

  .column-box {
    margin: 30px 0;
    height: 35px;
    line-height: 35px;
  }

  .required {
    color: red;
  }

  .info-row {
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    height: 45px;
    width: 90%;
  }

  .info-row .info-title-right {
    border-left: 1px solid #dddddd;
  }

  .info-row .info-title {
    background-color: #f3f3f3;
    font-size: 0.8em;
    text-align: center;
    line-height: 45px;
  }

  .info-row .info-content {
    border-left: 1px solid #dddddd;
    line-height: 45px;
    /*padding-left: 10px;*/
    text-align: center;
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .info-evaluation {
    width: 90%;
    border: 1px solid #dddddd;
    background-color: #f3f3f3;
  }

  .info-evaluation .info-title {
    font-size: 0.8em;
    text-align: center;
  }

  .info-evaluation .info-content {
    padding-left: 20px;
    background-color: white;
    min-height: 40px;
    border-left: 1px solid #dddddd;
  }

  .info-row-bottom {
    border: 1px solid #dddddd;
    height: 45px;
    width: 90%;
  }

  .info-row-bottom .info-title {
    background-color: #f3f3f3;
    font-size: 0.8em;
    text-align: center;
    line-height: 44px;
  }

  .info-row-bottom .info-content {
    border-left: 1px solid #dddddd;
    line-height: 45px;
    padding-left: 20px;
    font-size: 1em;
  }

  .info-row-bottom .info-title-right {
    border-left: 1px solid #dddddd;
  }

  .editButton {
    background-color: #20A0FF;
    cursor: pointer;
  }

  .editButton p {
    font-size: 1em;
    border: 0;
    color: white;
    text-align: center;
  }

  .title-icon {
    font-size: 1.2em;
    margin-left: 2.5em;
    cursor: pointer;
    color: #999;
  }

  .title-icons {
    margin-left: 5.5em;
    font-size: 1.2em;
    cursor: pointer;
    color: #999;
  }

  .title-icons:hover,
  .title-icon:hover {
    color: #20A0FF;
  }

  .personalInfoBorder {
    width: 90%;
  }
</style>
